<template>
	<view class="container">
		
		<view style="background-color: #f4f4f4; height: 20px;" ></view>
		
			<view class="example" style="font-weight: 400; margin-top: 20px; margin-left: 10px;margin-right: 10px;">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="名称" required>
											<uni-easyinput v-model="baseFormData.name" placeholder="请输入名称" />
					</uni-forms-item>
					<uni-forms-item label="工资" required>
											<uni-easyinput v-model="baseFormData.age" placeholder="请输入工资" />
				
					</uni-forms-item>
					<uni-forms-item style="position: relative;" label="工作地址">
						<uni-fav bgColor="lightblue"  style=" width: 100px; position: absolute;"  :checked="checkList[4]" :content-text="contentText" @click="favClick(4)" />
						<button type="primary" style="background-color: lightblue; position: absolute; top: -2px; left: 100px; border-radius: 55%;" size="mini" @click="removeStorage(4)" >取消</button>
					</uni-forms-item>
					<uni-forms-item label="工作要求">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入工作要求" />
					</uni-forms-item>
					<uni-forms-item label="日期时间">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
					</uni-forms-item>
					
					<uni-section title="特殊情况" type="line">
					      <uni-data-select
					        v-model="value"
					        :localdata="range"
					        @change="change"
					      ></uni-data-select>
					</uni-section>
					<button type="primary" style="background-color: lightblue; margin-top: 60px;" @click="submit()" >发布</button>
				</uni-forms>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				
				value: 0,
				  range: [
					{ value: 0, text: "视力残疾" },
					{ value: 1, text: "听力残疾" },
					{ value: 2, text: "言语残疾" },
					{ value: 0, text: "肢体残疾" },
					{ value: 1, text: "智力残疾" },
					{ value: 2, text: "精神残疾" },
					{ value: 2, text: "多重残疾" },
				  ],
				
				title: 'Hello',
				checkList: [false, false, false, false, false, false],
				contentText: {
					contentDefault: '未选择',
					contentFav: ''
				},
				baseFormData: {
									name: '',
									age: '',
									introduction: '',
									sex: 2,
									hobby: [5],
									datetimesingle: 1627529992399,
									longitude:'',
									latitude:'',
									location:''
								},
								// 表单数据
								alignmentFormData: {
									name: '',
									age: '',
								},
								// 多选数据源
								hobbys: [{
									text: '跑步',
									value: 0
								}, {
									text: '游泳',
									value: 1
								}, {
									text: '绘画',
									value: 2
								}, {
									text: '足球',
									value: 3
								}, {
									text: '篮球',
									value: 4
								}, {
									text: '其他',
									value: 5
								}],
								// 分段器数据
								current: 0,
								items: ['左对齐', '顶部对齐'],
								// 校验表单数据
								valiFormData: {
									name: '',
									age: '',
									introduction: '',
								},
								// 校验规则
								rules: {
									name: {
										rules: [{
											required: true,
											errorMessage: '名称不能为空'
										}]
									},
									age: {
										rules: [{
											required: true,
											errorMessage: '工资不能为空'
										}, {
											format: 'number',
											errorMessage: '工资只能输入数字'
										}]
									}
								},
			}
		},
		onShow() {
            this.user = getApp().globalData.globeUser
			
			this.fresh()
		},
		methods: {
			
			submit(){
				
				uni.request({
					url:getApp().globalData.baseUrl+"/work/PublishWork",
					method:'POST',
					data:{
						
						userid: this.user.userid,
						workname: this.baseFormData.name,
						description: this.baseFormData.introduction,
						payment: this.baseFormData.age,
						hobby: this.baseFormData.hobby,
						datatime: this.baseFormData.datetimesingle,
						latitude: this.baseFormData.latitude,
						longitude: this.baseFormData.longitude,
						location: this.baseFormData.location
					},
					success: (res) => {
						console.log(res)
						uni.showToast({
						 	title:"保存成功",
							icon:'success',
							duration:800
						 })
						 
						setTimeout(() => {
							uni.navigateBack();
						},1000)
					}
				})
				
				
			},
			
			removeStorage(index){
				let _this=this
				uni.removeStorage({
					key: 'position',
					success: (res) => {
						_this.contentText.contentFav = ""
						_this.checkList[index] = false
						console.log(_this.checkList[index]);
						_this.$forceUpdate()
					}
				})
				
			},
			
			
			
			getLocation(){
				uni.navigateTo({
					url:'../../pages/page/Workmap/Workmap'
				})
			},
			favClick(index) {
				
				let _this=this
				uni.getStorage({
					key: 'position',
					success: function (res) {
						console.log(res.data)
						console.log(res.data.longitude)
						
						console.log(_this.baseFormData.longitude)
						
					
						if(_this.contentText.contentFav != res.data.name){
							//变色
							_this.checkList[index] = !_this.checkList[index]
							console.log(_this.checkList[index]);
							_this.$forceUpdate()
						}
						
						
						
					},
					fail() {
						 _this.getLocation();
					}
				});
           
				
			},
			fresh(index){
				let _this=this
				index = 4;
				uni.getStorage({
					key: 'position',
					success: function (res) {
						console.log(res.data)
						_this.baseFormData.longitude = res.data.longitude
						_this.baseFormData.latitude = res.data.latitude
						_this.baseFormData.location = res.data.name
						_this.contentText.contentFav = res.data.name
						_this.checkList[index] = !_this.checkList[index]
						console.log(_this.checkList[index]);
						_this.$forceUpdate()
					}
				});
				
				
			}
			
			
			
				
			
			
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
		margin-top: 200upx;
	}
</style>
